<!--这个一般放在商品详情，商品页面的随意位置都能放的视频，不全屏播放但是层级最高，在微信中-->
<template>
    <div>
        <!--视频-->
        <div class="header-video-wrap">
            <!--视频播放按钮-->
            <div v-if="videoPlayBtn"  class="video-play-btn video-btn-position">
                <img class="video-play-btn-img" id="headerVideoBtn" src="../../../assets/images/common/video_play_btn.png"
                     @click="videoBtnClick">
            </div>
            <video
                    v-if="videoShow"
                    id="headerVideo"
                   ref="shopVideo"
                   class="header-video"
                   x5-playsinline=""
                   webkit-playsinline="true"
                   x-webkit-airplay="true"
                   playsinline
                    controls
                   :poster="poster"
                   x5-video-player-fullscreen='true'
                   x5-video-ignore-metadata='true'
                   @ended="playEnd">
                <source :src="adVideoUrl" type="video/mp4"/>
            </video>
        </div>
    </div>
</template>

<script>
    import xurl from '../../../x/xurl'

    export default {
        name:'headerVideo',
        data() {
            return {
                video:'',
                pageShow: false,
                videoShow:true,
                videoPlayBtn:true
            }
        },
        props: {
            actId: {type: Number},
            actType: {type: String},
            adVideoUrl:{type:String},
            poster:{type:String},
        },
        created() {
        },
        methods: {
            // initInfo() {
            //     let url = this.NW_API_vue + '/getAdvertisement/' + this.actId + '/' + this.actType;
            //     xurl.get(url).then(data => {
            //         if (data.success && data.result && Object.keys(data.result).length) {
            //             this.adVideoUrl = data.result.adVideoUrl
            //             this.coverImg = data.result.coverImg
            //             this.pageShow = true
            //         }
            //     })
            // },
            //视频1播放
            videoBtnClick() {
                this.$refs.shopVideo.play();
                this.$refs.shopVideo.setAttribute('controls','controls');
                this.videoPlayBtn = false;
            },
            //video显示
            playEnd(){
                let that = this;
                this.$refs.shopVideo.setAttribute('controls',false);
                this.videoPlayBtn = true;
                this.videoShow = false;
                setTimeout(function () {
                    that.videoShow = true;
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .header-video-wrap{
        width: 3.55rem;
        height: 1.8rem;
        background: #393a3f;
        border-radius: 8px;
        position: relative;
        left: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        margin-bottom: .1rem;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }
    .video-play-btn-img {
        width: .4rem;
        height: .4rem;
    }
    .video-btn-position {
        top: 50%;
        transform: translateY(-50%);
        height: .4rem;
        z-index: 1030;
        position: absolute;
        bottom: .3rem;
        text-align: center;
    }
    .header-video{
        height: 1.8rem;
    }
</style>
